<template>
  <view>
    <u-tabbar :value="value4" @change="name => value4 = name" :fixed="true" :placeholder="true" activeColor="#8580F5"
      :border="false" :safeAreaInsetBottom="true">
      <u-tabbar-item text="抢约">
        <template #active-icon>
          <view class="active-icon">
            <image class="active-icon-img" src="@/static/image/icon-qiangyue-xz@2x.png"></image>
          </view>
        </template>
        <template #inactive-icon>
          <view class="inactive-icon">
            <image class="inactive-icon-img" src="@/static/image/icon-qiangyue@2x.png"></image>
          </view>
        </template>
      </u-tabbar-item>
      <u-tabbar-item text="发约">
        <template #active-icon>
          <view class="active-icon">
            <image class="active-icon-img" src="@/static/image/icon-fayue-fy@2x.png"></image>
          </view>
        </template>
        <template #inactive-icon>
          <view class="inactive-icon">
            <image class="inactive-icon-img" src="@/static/image/icon-fayue@2x.png"></image>
          </view>
        </template>
      </u-tabbar-item>
      <u-tabbar-item text="我的">
        <template #active-icon>
          <view class="active-icon">
            <image class="active-icon-img" src="@/static/image/icon-wode-wd@2x.png"></image>
          </view>
        </template>
        <template #inactive-icon>
          <view class="inactive-icon">
            <image class="inactive-icon-img" src="@/static/image/icon-wode.png"></image>
          </view>
        </template>
      </u-tabbar-item>
    </u-tabbar>
  </view>
</template>

<script>
  export default {
    name: "Tabbar",
    data() {
      return {
        value4: 0,
      };
    }
  }
</script>

<style lang="scss" scoped>
  .active-icon {
    width: 56rpx;
    height: 56rpx;
    position: relative;
    bottom: 4px;

    image {
      width: 100%;
      height: 100%;
    }
  }

  .inactive-icon {
    width: 46rpx;
    height: 46rpx;

    image {
      width: 100%;
      height: 100%;
    }
  }
</style>